---
layout: demo
title: clip-path雪碧图自适应
category: demo
description: 根据手机屏幕的不同大小自适应雪碧图图标的大小
custom_css: |
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"  />
  <style>   
    .icon{width:100%;}
    .icon-1 {-webkit-clip-path: inset(0 90% 0 0)}
    .icon-2 {-webkit-clip-path: inset(0 80% 0 10%)}
    .icon-3 {-webkit-clip-path: inset(0 70% 0 20%)}
    .icon-4 {-webkit-clip-path: inset(0 60% 0 30%)}
    .icon-5 {-webkit-clip-path: inset(0 50% 0 40%)}
    .icon-6 {-webkit-clip-path: inset(0 40% 0 50%)}
    .icon-7 {-webkit-clip-path: inset(0 30% 0 60%)}
    .icon-8 {-webkit-clip-path: inset(0 20% 0 70%)}
    .icon-9 {-webkit-clip-path: inset(0 10% 0 80%)}
    .icon-10{-webkit-clip-path: inset(0 100% 0 90%)}

    .icon-wrap{width:10%;overflow: hidden;float: left;}
    .icon-wrap img {width:1000%;}
    .icon-group{overflow: hidden;margin-bottom: 30px;}
    .icon-a{-webkit-transform: translateX(0);}
    .icon-b{-webkit-transform: translateX(-10%);}
    .icon-c{-webkit-transform: translateX(-20%);}
    .icon-d{-webkit-transform: translateX(-30%);}
    .icon-e{-webkit-transform: translateX(-40%);}
    .icon-f{-webkit-transform: translateX(-50%);}
    .icon-g{-webkit-transform: translateX(-60%);}
    .icon-h{-webkit-transform: translateX(-70%);}
    .icon-i{-webkit-transform: translateX(-80%);}
    .icon-j{-webkit-transform: translateX(-90%);}
  </style>
---

<img class="icon icon-1" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-2" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-3" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-4" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-5" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-6" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-7" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-8" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-9" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />
<img class="icon icon-10" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" />


<h2>clip-path兼容性较差，可使用以下方案</h2>
<div class="icon-group">
  <div class="icon-wrap"><img class="icon-a" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-b" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-c" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-d" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-e" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-f" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-g" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-h" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-i" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
  <div class="icon-wrap"><img class="icon-j" src="http://www2.res.meizu.com/zh_cn/images/common/subnav-icon.png" /></div>
</div>
